/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

/* stylelint-disable @cloudscape-design/no-implicit-descendant */
@use './base-styles.scss' as base-styles;
@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use 'sass:map';
@use 'sass:list';
@use 'sass:selector';

// Transforms a list of tags into the corresponding list of variants class declarations
@function classify($tags) {
  $classified-tags: ();
  @each $tag in $tags {
    $classified-tags: list.append($classified-tags, '.box.#{$tag}-variant', $separator: comma);
  }
  @return $classified-tags;
}

@mixin extra-default-styles {
  .box {
    &.h1-variant,
    &.h2-variant,
    &.h3-variant,
    &.h4-variant,
    &.h5-variant,
    &.p-variant {
      @include base-styles.headings-paragraphs-extra-defaults;
    }
    &.small-variant {
      display: inline-block;
    }
    &.code-variant,
    &.pre-variant,
    &.samp-variant {
      @include base-styles.code-extra-defaults;
    }
    &.key-label-variant {
      @include styles.font-label;
      color: awsui.$color-text-label;
      margin-block-end: awsui.$space-key-value-gap;
    }
    &.gen-ai-label-variant {
      @include styles.font-body-s;
      font-style: italic;
      color: awsui.$color-text-label-gen-ai;
    }
    &.value-large-variant {
      @include styles.font-display-l;
      font-weight: awsui.$font-box-value-large-weight;
      color: inherit;
    }
    &.inline-code-variant {
      @include base-styles.code-extra-defaults;
      @include styles.font-body-s;
      border-start-start-radius: awsui.$space-static-xxs;
      border-start-end-radius: awsui.$space-static-xxs;
      border-end-start-radius: awsui.$space-static-xxs;
      border-end-end-radius: awsui.$space-static-xxs;
      background-color: awsui.$color-background-inline-code;
      padding-block: awsui.$space-static-xxxs;
      padding-inline: awsui.$space-static-xxs;
    }
    &.h1-variant.font-weight-default,
    &.h2-variant.font-weight-default,
    &.h3-variant.font-weight-default,
    &.h4-variant.font-weight-default,
    &.h5-variant.font-weight-default,
    &.value-large-variant.font-weight-default,
    &.font-weight-heavy {
      @include styles.font-smoothing;
    }
  }
}

@mixin default-styles {
  @each $property, $variants-map in base-styles.$font-styles {
    $variant-value: map.get($variants-map, default);
    @each $value, $tags in $variant-value {
      #{selector.append(classify($tags), '.#{$property}-default')} {
        @include base-styles.style-declaration($property, $value);
      }
    }
  }
  @include extra-default-styles;
}

@mixin text-styles-variants {
  @each $property, $variants-map in base-styles.$font-styles {
    @each $variant-name, $variant-value in $variants-map {
      @if $variant-name != default {
        &.#{$property}-#{$variant-name} {
          @include base-styles.style-declaration($property, $variant-value);
        }
      }
    }
  }
}

@include default-styles;
.box {
  @include text-styles-variants;
}

.t-left {
  text-align: start;
}
.t-right {
  text-align: end;
}
.t-center {
  text-align: center;
}
